<template>
  <div style="width: 100%;">
    <avue-crud :option="option"
               :table-loading="loading"
               :data="tableList"
               @selection-change="v=>selection=v"
               ref="crud">
      <template slot="menuLeft">
        <el-button size="medium"
                   :disabled="disabled"
                   type="primary"
                   @click="addLine">
          添加行
        </el-button>
        <el-button size="medium"
                   :disabled="disabled||selection.length===0"
                   type="danger"
                   @click="remove">
          移除
        </el-button>
      </template>

      <template slot="menu" slot-scope="{row}" v-if="showOperation">
        <el-button type="text" :disabled="disabled" @click="rowSave(row)">
          {{ !row.$cellEdit ? "编辑" : "保存" }}
        </el-button>
      </template>
    </avue-crud>
  </div>
</template>

<script>
export default {
  name: "msEditTable",
  props: {
    tableList: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    },
    column: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    },
    height: {
      type: String,
      default: () => {
        return "300px"
      }
    },
    disabled: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    showOperation: {
      type: Boolean,
      default: () => {
        return true
      }
    }
  },
  data() {
    return {
      loading: false,
      option: {
        height: this.height,
        calcHeight: 30,
        dialogWidth: 900,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: false,
        selection: !this.disabled,
        labelWidth: 120,
        menuWidth: 90,
        viewBtn: false,
        dialogClickModal: false,
        tabs: true,
        delBtn: false,
        addBtn: false,
        editBtn: false,
        refreshBtn: false,
        columnBtn: false,
        align: "center",
        menu: !this.disabled,
        header: !this.disabled,
        column: this.column,
      },
      selection: [],
    }
  },
  methods: {
    addLine() {
      let data = this.deepCopy(this.tableList)
      let column = this.deepCopy(this.column);
      let obj = {};
      column.forEach(item => {
        obj[item.prop] = "";
        Object.assign(obj, {$cellEdit: true})
      })
      data.push(obj)
      this.$emit("update:tableList", data);
    },
    remove() {
      let data = JSON.parse(JSON.stringify(this.tableList));
      let dataCopy = JSON.parse(JSON.stringify(this.tableList));
      let index = this.selection.map(i => i.$index);
      dataCopy = [];

      data.forEach(i => {
        if (!index.includes(i.$index)) {
          dataCopy.push(i)
        }
      })
      this.$emit("update:tableList", dataCopy);
    },
    rowSave(row) {
      row.$cellEdit = !row.$cellEdit;
    },
  },
  /* watch: {
     disabled: {
       handler(v) {
         this.option.menu = !v;
         this.option.header = !v;
         this.option.selection = !v;

         this.$nextTick(() => {
           this.$refs['crud'].refreshTable();
         })
       },
       immediate: true,
       deep: true
     }
   }*/
}
</script>

<style scoped>

</style>
